@extends('home.parent')
@section('title','直播用户')
@section('head_js')
@endsection
@section('head_css')
<link rel="stylesheet" href="{{ asset('/css/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('/css/toggleButtonsMain.css') }}">
@endsection
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            直播用户
			<small></small>
        </h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{URL('admin')}}">
                    <i class="fa fa-dashboard"></i>首页
                </a>
            </li>
            <li class="active">直播用户</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="form-inline pull-right">
                            <fieldset>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-addon">
                                        <strong>用户昵称</strong>
                                    </span>
                                    <input type="text" class="form-control" id="name">
                                </div>
                                <div class="input-group input-group-sm">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-primary" onclick="searchData()">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
						<div class="form-inline pull-left">
							<div class="input-group input-group-sm" style="margin-left: 20px;">
								<div class="input-group-btn" >
									<a href="#" class="btn btn-info" onclick="showCreateElement()">新增视频监控</a>
								</div>
							</div>
						</div>
                    </div>
                    <!--/.box-header-->
                    <div class="box-body">
                        <table id="data_list" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>所属会员</th>
                                    <th>编号</th>
                                    <th>用户ID</th>
                                    <th>昵称</th>
                                    <th>视频</th>
                                    <th>简介</th>
                                    <th>获赞数</th>
                                    <th>评论数</th>
                                    <th>分享数</th>
                                    <th>潜在客户</th>
                                    <th>更新时间</th>
                                    <th>查看数据</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>所属会员</th>
                                    <th>编号</th>
                                    <th>用户ID</th>
                                    <th>昵称</th>
                                    <th>视频</th>
                                    <th>简介</th>
                                    <th>获赞数</th>
                                    <th>评论数</th>
                                    <th>分享数</th>
                                    <th>潜在客户</th>
                                    <th>更新时间</th>
                                    <th>查看数据</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="modal-info">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">新增视频监控</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="">视频链接地址</label>
					<input type="text" class="form-control" name="info_url" id="info_url" placeholder="请输入视频分享链接地址">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary" onclick="saveData()">保存</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<style>
    #tableComment table{
        border-collapse: collapse;
        color: #777;
        width:100%;
    }
    #tableComment table tr th,#tableComment table tr td{
        padding: 10px;
        border: 1px solid #f8f8f8;
        white-space: nowrap
    }
    #tableComment table tbody tr:hover{
        background:#f3f3f3;
    }
    #tableComment table thead tr{
        background: #f0f0f0;
    }
    #tableComment .more{
        text-align:center;
        padding:10px 0;
    }
    #tableComment .more span{
        cursor:pointer;
    }
</style>
<div id="tableComment" style="display:none;color:#777;padding:10px 20px 0 20px;">
    <table>
        <thead>
        <tr>
            <td>头像</td>
            <td>内容</td>
            <td>用户昵称</td>
            <td>账号(电话，微信)</td>
            <td>视频地址</td>
            <td>评论时间</td>
            <td>获取时间</td>
            <td>处理状态</td>

        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="more"></div>
    <input type="hidden" name="videoId">
    <input type="hidden" name="nextPage">
</div>
<div id="showQrcode" style="display:none;padding:20px;"></div>
@endsection
@section('foot_js')
<script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('/js/fastclick.js') }}"></script>
<script src="{{ asset('/js/tools.js') }}"></script>
<script src="{{ asset('/js/qrcode.min.js') }}"></script>
<script>
var list_ajax;
$(function() {
    var lang = puppet.langShow();
    list_ajax = $("#data_list").dataTable({
        language: lang,
        autoWidth: false,
        stripeClasses: ["odd", "even"],
        processing: true,
        serverSide: true,
        searching: false,
        orderMulti: false,
        order: [[0, 'desc']],
        renderer: "bootstrap",
        pagingType: "simple_numbers",
        aLengthMenu: [10, 20, 50, 100],
        iDisplayLength: 10,
        columnDefs: [{
            "targets": [1, 2, 3, 4, 5, 6, 7, 8],
            "orderable": false
        },
        ],
        ajax: function(data, callback, settings) {
            var param = {};
            param.limit = data.length;
            param.start = data.start;
            param.page = (data.start / data.length) + 1;
            param.order = data.order;
            param.name = $.trim($("#name").val());
            param.type = 2;
            $.ajax({
                type: "POST",
                url: "{{ URL('admin/user/data/list') }}",
                cache: false,
                data: param,
                dataType: "json",
                success: function(result) {
                    var returnData = {};
                    returnData.draw = data.draw;
                    returnData.recordsTotal = result.total;
                    returnData.recordsFiltered = result.total;
                    returnData.data = result.data;
                    callback(returnData)
                }
            })
        },
        columns: [
            {"data": "fname"},
			{"data": "kid"},
			{"data": "info_id"},
			{"data": "info_name"},
			{"data": "img_url"},
			{"data": "info_signature"},
			{"data": "num_sop"},
			{"data": "num_fls"},
			{"data": "num_fans"},
            {"data": "allCount"},
			{"data": "info_date"},
            {"data": "operation"}
        ],
    }).api()
});
function searchData() {
    $("#data_list").dataTable().fnDraw(false);
    layer.msg('操作成功',{icon:6});
}
//添加
function showCreateElement(){
	$("#info_url").val('');
	$('#modal-info').modal();
}
//保存
function saveData(){
	var info_url = $.trim($("#info_url").val());
	if(info_url == '') {
        layer.msg('请输入视频分享链接地址',{icon:2});
		return false;
	}
	var url = "{{ URL('admin/user/data/aindex') }}";
	var data = {info_url:info_url};
	var result = puppet.myajax('post',url,data,false);
	if(result.code == 1){
        layer.msg(result.msg,{icon:5});
		return false;
	}else{
        layer.msg(result.msg,{icon:6});
		setTimeout('window.location.reload()',2000);
		$('#modal-info').modal('hide');
	}
}
//显示视频评论
function showContent(video_id,title){
    layer.closeAll();
    getVideoComment(video_id);
    $('#tableComment tbody').html("");
    $('#tableComment .more').html("");
    showlayerArea("tableComment",title,"80%","80%");
}
//拉取评论数据
function getVideoComment(video_id,page=1){
    $.ajax({
        type:'POST',
        url: "{{ URL('userinfo/get/comment') }}",
        data: {video_id:video_id,page:page},
        dataType:'json',
        success:function(r){
            if(r.code==1){
                layer.msg(r.msg,{icon: 5});
                return false;
            }
            if(page==1){
                if(r.html==''){
                    $('#tableComment tbody').html("<tr><td colspan=\"10\" style=\"text-align:center;\">无数据</td></tr>");
                }else{
                    $('#tableComment tbody').html(r.html);
                }
            }else if(page>1){
                $('#tableComment tbody').append(r.html);
            }
            if(r.nextPage==0){
                $('#tableComment .more').html("");
            }else{
                $('#tableComment .more').html("<span onclick=\"getMore()\">点击加载更多</span>");
            }
            $('#tableComment input[name="videoId"]').val(video_id);
            $('#tableComment input[name="nextPage"]').val(r.nextPage);
        },
        error:function(){
            $('#tableComment tbody').html("<tr><td colspan=\"10\" style=\"text-align:center;\">无数据</td></tr>");
            layer.msg("网络错误",{icon: 5});
        }
    });
}
//加载下一页评论数据
function getMore(){
    var nextPage=$('#tableComment input[name="nextPage"]').val();
    var video_id=$('#tableComment input[name="videoId"]').val();
    if( nextPage!=0 && nextPage!='' && nextPage!=undefined && !isNaN(nextPage) ){
        getVideoComment(video_id,nextPage);
    }
}
//关注用户
function following(follow){
    qrCode("showQrcode",follow,"扫码私聊");
}
//修改评论处理状态
function upStatus(kid,obj){
    var thisType=$(obj).attr("type");
    $.ajax({
        type:'POST',
        url: "{{ URL('userinfo/get/status') }}",
        data: {kid:kid},
        dataType:'json',
        success:function(r){
            if(r.code==0){
                if(thisType=='checkbox'){
                    $(obj).prop('type','default');
                    $(obj).prop('checked','');
                }else{
                    $(obj).prop('type','checkbox');
                    $(obj).prop('checked','checked');
                }
                layer.msg("操作成功",{icon: 6});
            }else{
                layer.msg("操作失败",{icon: 5});
                return false
            }
        },
        error:function(){
            layer.msg("网络错误",{icon: 5});
            return false;
        }
    });
}
</script>
@endsection